import React, { useState } from 'react';
import { Space, Divider, Typography, message, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { ConfirmModal } from '../components/common/Modal/ConfirmModal';
// 导入所有业务组件
import { MainLayout } from '../components/common/Layout/MainLayout';
import { SearchTable } from '../components/common/Table/SearchTable';
import { BaseForm } from '../components/common/Form/BaseForm';
// import { ConfirmModal } from '../components/common/Modal/ConfirmModal';

const { Title, Paragraph } = Typography;

// Mock 数据类型定义
interface User {
  id: number;
  name: string;
  department: string;
  email: string;
  phone: string;
  status: 'active' | 'inactive';
}

interface Material {
  id: number;
  name: string;
  category: string;
  quantity: number;
  available: number;
  location: string;
}

interface BorrowRecord {
  id: number;
  userName: string;
  materialName: string;
  borrowDate: string;
  expectedReturn: string;
  status: 'borrowed' | 'returned' | 'overdue';
}

export const ExamplePage: React.FC = () => {
  const [confirmModalVisible, setConfirmModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  // Mock 数据
  const userColumns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '部门', dataIndex: 'department', key: 'department' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    { title: '电话', dataIndex: 'phone', key: 'phone' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <span style={{ color: status === 'active' ? '#52c41a' : '#ff4d4f' }}>
          {status === 'active' ? '活跃' : '禁用'}
        </span>
      )
    },
  ];

  const materialColumns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '物资名称', dataIndex: 'name', key: 'name' },
    { title: '分类', dataIndex: 'category', key: 'category' },
    { title: '总数量', dataIndex: 'quantity', key: 'quantity' },
    { title: '可用数量', dataIndex: 'available', key: 'available' },
    { title: '存放位置', dataIndex: 'location', key: 'location' },
  ];

  const borrowColumns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '借用人', dataIndex: 'userName', key: 'userName' },
    { title: '物资名称', dataIndex: 'materialName', key: 'materialName' },
    { title: '借用日期', dataIndex: 'borrowDate', key: 'borrowDate' },
    { title: '预计归还', dataIndex: 'expectedReturn', key: 'expectedReturn' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusConfig = {
          borrowed: { color: '#1890ff', text: '借用中' },
          returned: { color: '#52c41a', text: '已归还' },
          overdue: { color: '#ff4d4f', text: '已逾期' },
        };
        const config = statusConfig[status as keyof typeof statusConfig];
        return <span style={{ color: config.color }}>{config.text}</span>;
      }
    },
  ];

  const userData: User[] = [
    { id: 1, name: '张三', department: '计算机学院', email: 'zhangsan@example.com', phone: '13800138001', status: 'active' },
    { id: 2, name: '李四', department: '物理学院', email: 'lisi@example.com', phone: '13800138002', status: 'active' },
    { id: 3, name: '王五', department: '化学学院', email: 'wangwu@example.com', phone: '13800138003', status: 'inactive' },
  ];

  const materialData: Material[] = [
    { id: 1, name: '示波器', category: '电子仪器', quantity: 10, available: 8, location: 'A101' },
    { id: 2, name: '显微镜', category: '光学仪器', quantity: 5, available: 3, location: 'B205' },
    { id: 3, name: '离心机', category: '生化仪器', quantity: 3, available: 1, location: 'C301' },
  ];

  const borrowData: BorrowRecord[] = [
    { id: 1, userName: '张三', materialName: '示波器', borrowDate: '2024-01-15', expectedReturn: '2024-02-15', status: 'borrowed' },
    { id: 2, userName: '李四', materialName: '显微镜', borrowDate: '2024-01-10', expectedReturn: '2024-01-20', status: 'overdue' },
    { id: 3, userName: '王五', materialName: '离心机', borrowDate: '2024-01-05', expectedReturn: '2024-01-12', status: 'returned' },
  ];

  // 事件处理函数
  const handleSearch = (value: string) => {
    message.info(`搜索关键词: ${value}`);
  };

  const handleAdd = () => {
    message.success('点击了新增按钮');
  };

  const handleRefresh = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      message.success('数据已刷新');
    }, 1000);
  };

  const handleFormSubmit = (values: any) => {
    message.success('表单提交成功');
  };

  const handleConfirm = () => {
    setConfirmModalVisible(false);
    message.success('确认操作执行成功');
  };

  const handleCancel = () => {
    setConfirmModalVisible(false);
    message.info('取消操作');
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>组件示例页面</Title>
      <Paragraph>这个页面展示了所有业务组件的使用方式</Paragraph>

      <Space direction="vertical" size="large" style={{ width: '100%' }}>

        {/* SearchTable 示例 - 用户管理 */}
        <div>
          <Title level={3}>1. SearchTable - 用户管理</Title>
          <SearchTable<User>
            tableTitle="用户管理"
            columns={userColumns}
            dataSource={userData}
            rowKey="id"
            loading={loading}
            onSearch={handleSearch}
            onAdd={handleAdd}
            onRefresh={handleRefresh}
            searchPlaceholder="搜索用户..."
            pagination={{ pageSize: 5 }}
          />
        </div>

        <Divider />

        {/* SearchTable 示例 - 物资管理 */}
        <div>
          <Title level={3}>2. SearchTable - 物资管理</Title>
          <SearchTable<Material>
            tableTitle="物资管理"
            columns={materialColumns}
            dataSource={materialData}
            rowKey="id"
            onSearch={handleSearch}
            onAdd={handleAdd}
            searchPlaceholder="搜索物资..."
            pagination={{ pageSize: 5 }}
          />
        </div>

        <Divider />

        {/* SearchTable 示例 - 借用记录 */}
        <div>
          <Title level={3}>3. SearchTable - 借用记录</Title>
          <SearchTable<BorrowRecord>
            tableTitle="借用记录"
            columns={borrowColumns}
            dataSource={borrowData}
            rowKey="id"
            onSearch={handleSearch}
            onRefresh={handleRefresh}
            searchPlaceholder="搜索借用记录..."
            pagination={{ pageSize: 5 }}
          />
        </div>

        <Divider />

        {/* BaseForm 示例 */}
        <div>
          <Title level={3}>4. BaseForm - 用户信息表单</Title>
          <BaseForm
            onCancel={() => message.info('取消表单')}
            onFinish={handleFormSubmit}
            submitText="保存"
            cancelText="取消"
            initialValues={{
              name: '示例用户',
              department: '计算机学院',
              email: 'example@university.edu.cn'
            }}
          >
            <BaseForm.Item
              label="姓名"
              name="name"
              rules={[{ required: true, message: '请输入姓名' }]}
            >
              <input type="text" className="ant-input" placeholder="请输入姓名" />
            </BaseForm.Item>

            <BaseForm.Item
              label="部门"
              name="department"
              rules={[{ required: true, message: '请输入部门' }]}
            >
              <input type="text" className="ant-input" placeholder="请输入部门" />
            </BaseForm.Item>

            <BaseForm.Item
              label="邮箱"
              name="email"
              rules={[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '邮箱格式不正确' }
              ]}
            >
              <input type="email" className="ant-input" placeholder="请输入邮箱" />
            </BaseForm.Item>
          </BaseForm>
        </div>

        <Divider />

        {/* ConfirmModal 示例 */}
        <div>
          <Title level={3}>5. ConfirmModal - 确认对话框</Title>
          <Space>
            <button
              className="ant-btn ant-btn-warning"
              onClick={() => setConfirmModalVisible(true)}
            >
              打开警告确认框
            </button>

         
          </Space>

          
        </div>

      </Space>
    </div>
  );
};

// 用于独立展示的包装组件
export const ExamplePageWithLayout: React.FC = () => {
  return (
    <MainLayout>
      <ExamplePage />
    </MainLayout>
  );
};

export default ExamplePageWithLayout;